<template>
  <div class="Home-box">
    <!-- <iframe
      id="iframe"
      :class="isShowTuobiao ? 'iframe-tuobiao' : ''"
      style="height: 100vh; width: 100vw"
      :src="Twinurl"
      scrolling="no"
      ref="iframe"
    ></iframe> -->
    <!-- 前端UI -->
    <div class="Home-UI-box" id="TwinContent">
      <!-- title标题 -->
      <div class="Home-UI-top">
        <div class="Home-UI-title"></div>
        <div class="Home-UI-fanhui"></div>
      </div>
      <div class="Home-UI-dibu"></div>
      <!-- 切换站 -->
      <div class="Home-UI-SwitchTo">
        <span>贵州金元瓮安100MW/200MWh独立共享储能电站</span>
        <div
          class="sanjiao-sanjiao"
          :class="isShowSanjaio ? 'sanjiao-sanjiao' : 'sanjiao-sanjiao1'"
          @click="addSanjiao"
        ></div>
      </div>
      <div
        class="Home-UI-SwitchTo-box animate__animated"
        :class="isShowSanjaio ? 'animate__fadeOutLeft' : 'animate__fadeInLeft'"
        v-if="!isShowSanjaio"
      >
        <div class="SwitchTo-box">
          <div class="Home-UI-SwitchTo-item">
            <span>贵州金元瓮安100MW/200MWh独立共享储能电站</span>
          </div>
          <div class="Home-UI-SwitchTo-item">
            <span>贵州金元瓮安100MW/200MWh独立共享储能电站</span>
          </div>
          <div class="Home-UI-SwitchTo-item">
            <span>贵州金元瓮安100MW/200MWh独立共享储能电站</span>
          </div>
          <div class="Home-UI-SwitchTo-item">
            <span>贵州金元瓮安100MW/200MWh独立共享储能电站</span>
          </div>
          <div class="Home-UI-SwitchTo-item">
            <span>贵州金元瓮安100MW/200MWh独立共享储能电站</span>
          </div>
          <div class="Home-UI-SwitchTo-item">
            <span>贵州金元瓮安100MW/200MWh独立共享储能电站</span>
          </div>
          <div class="Home-UI-SwitchTo-item">
            <span>贵州金元瓮安100MW/200MWh独立共享储能电站</span>
          </div>
        </div>
      </div>
      <!-- 孪生运行组件 -->
      <div
        class="Home-UI-TwinOperation"
        :style="!isShowSanjaio ? 'filter: blur(5px)' : ''"
        v-if="twin.isShowactive == 1"
      >
        <TwinOperation />
      </div>
      <!-- 孪生安全组件 -->
      <div
        class="Home-UI-TwinSafety"
        :style="!isShowSanjaio ? 'filter: blur(5px)' : ''"
        v-if="twin.isShowactive == 2"
      >
        <TwinSafety />
      </div>
      <!-- 孪生健康 -->
      <div
        class="Home-UI-TwinHealth"
        :style="!isShowSanjaio ? 'filter: blur(5px)' : ''"
        v-if="twin.isShowactive == 3"
      >
        <TwinHealth />
      </div>

      <!-- 语音播报 -->
      <div class="Home-UI-Broadcast">
        <div class="Home-UI-Broadcast-title">
          <div class="Broadcast-tanhao"></div>
          <div class="Broadcast-name">xxx舱/xx簇/xx包</div>
          <div class="Broadcast-enirong">
            萨杜合适的话稍等科技合适的稍等稍等
          </div>
          <div class="Broadcast-shijan">2000-11-15 11:12:13</div>
          <div
            :class="isShowBobao ? 'Broadcast-jiantou' : 'Broadcast-jiantou1'"
            @click="addBobao"
          ></div>
        </div>
        <div
          class="Home-UI-Broadcast-box animate__animated"
          :class="
            isShowBobao ? 'animate__fadeOutRight' : 'animate__fadeInRight'
          "
          v-if="!isShowBobao"
        >
          <div class="Broadcast-item" v-for="item in 10">
            <div class="Broadcast-tanhao"></div>
            <div class="Broadcast-name">xxx舱/xx簇/xx包</div>
            <div class="Broadcast-enirong">
              萨杜合适的话稍等科技合适的稍等稍等
            </div>
            <div class="Broadcast-shijan">2000-11-15 11:12:13</div>
          </div>
        </div>
      </div>
      <!-- 孪生运行等按钮 -->
      <div class="Home-UI-buttonbox">
        <div
          class="UI-buttonbox-yunxing"
          :class="
            twin.isShowactive == 1
              ? 'UI-buttonbox-yunxingG'
              : 'UI-buttonbox-yunxing'
          "
          @click="addActive(1)"
        ></div>
        <div
          class="UI-buttonbox-anquan"
          :class="
            twin.isShowactive == 2
              ? 'UI-buttonbox-anquanG'
              : 'UI-buttonbox-anquan'
          "
          @click="addActive(2)"
        ></div>
        <div
          class="UI-buttonbox-jiankang"
          :class="
            twin.isShowactive == 3
              ? 'UI-buttonbox-jiankangG'
              : 'UI-buttonbox-jiankang'
          "
          @click="addActive(3)"
        ></div>
        <div
          class="UI-buttonbox-jiankong"
          :class="
            twin.isShowactive == 4
              ? 'UI-buttonbox-jiankongG'
              : 'UI-buttonbox-jiankong'
          "
          @click="addActive(4)"
        ></div>
      </div>
      <!-- 摄像头组件(场站主视角) -->
      <VueDragResize
        style="pointer-events: all"
        :w="326"
        :h="203"
        :x="20"
        :y="706"
        :z="1"
        :isDraggable="true"
        :isResizable="true"
        @clicked="addClicked"
      >
        <div class="Home-UI-Camera">
          <Video />
        </div>
      </VueDragResize>
      <!-- 摄像头组件(视频矩阵) -->
      <VueDragResize
        style="pointer-events: all"
        :style="!isShowSanjaio ? 'filter: blur(5px)' : ''"
        v-if="twin.isShowactive == 4"
        :w="326"
        :h="236"
        :x="20"
        :y="106"
        :z="1"
        :isDraggable="true"
        :isResizable="true"
        :aspectRatio="true"
        @clicked="addClicked"
      >
        <div class="Home-UI-Camera1">
          <div class="Camera1-item" v-for="item in Videourl">
            <Video1 :Videourl="item" />
          </div>
        </div>
      </VueDragResize>
      <!-- 巡检组件 -->
      <div class="Home-UI-Inspection" v-if="isShowXunjain">
        <Inspection @changeXhao="changeXhao" />
      </div>
      <!-- 巡检报告组件 -->
      <div class="Home-UI-InspectionReport" v-if="isShowXunjainbaogao">
        <InspectionReport @changXhaoBg="changXhaoBg" />
      </div>
    </div>
  </div>
</template>
<script setup>
import VueDragResize from "vue-drag-resize/src"
import { ref, onMounted } from "vue"
import TwinOperation from "@/components/TwinOperation.vue"
import userStore from "@/store/index.js"
const { twin } = userStore()
import TwinSafety from "@/components/TwinSafety.vue"
import TwinHealth from "@/components/TwinHealth.vue"
import autofit from "@/utils/autofit.js"
import Video from "@/view/Twinoperation/video.vue"
import Video1 from "@/view/Twinoperation/video1.vue"
import Inspection from "@/view/Twinoperation/Inspection.vue"
import InspectionReport from "@/view/Twinoperation/InspectionReport.vue"
import "animate.css"
onMounted(() => {
  autofit.init(
    {
      dw: 1920,
      dh: 1080,
      el: "#TwinContent",
      resize: true
    },
    false
  ) // 可关闭控制台运行提示输出
})
const Twinurl = ref(window.streamingConfig.Twinurl)
// 切换站的按钮
const addActive = (e) => {
  if (e == 1) {
    // 孪生运行
    twin.updateActive(e)
  }
  if (e == 2) {
    // 孪生安全
    twin.updateActive(e)
  }
  if (e == 3) {
    // 孪生健康
    twin.updateActive(e)
  }
  if (e == 4) {
    // 设备监视
    twin.updateActive(e)
  }
}
const isShowSanjaio = ref(true)
// 三角点击
const addSanjiao = () => {
  isShowSanjaio.value = !isShowSanjaio.value
}
const isShowBobao = ref(true)
// 播报三角点击
const addBobao = () => {
  isShowBobao.value = !isShowBobao.value
}
// 视频矩阵的数据源
const Videourl = ref([
  "ws://223.71.21.171:14388/live?url=rtsp://admin:Cpes.60604766@119.177.128.46:36001/cam/realmonitor?channel=17&subtype=1",
  "ws://223.71.21.171:14388/live?url=rtsp://admin:Cpes.60604766@119.177.128.46:36001/cam/realmonitor?channel=17&subtype=1",
  "ws://223.71.21.171:14388/live?url=rtsp://admin:Cpes.60604766@119.177.128.46:36001/cam/realmonitor?channel=17&subtype=1",
  "ws://223.71.21.171:14388/live?url=rtsp://admin:Cpes.60604766@119.177.128.46:36001/cam/realmonitor?channel=17&subtype=1"
])
const isShowTuobiao = ref(false) // 点击了摄像头组件时为true
// 点击摄像头
const addClicked = () => {
  console.log("点击了组件")
  // isShowTuobiao.value = true
}
const isShowXunjain = ref(true) //巡检布尔值
// 巡检的X号
const changeXhao = () => {
  isShowXunjain.value = false
}
const isShowXunjainbaogao = ref(true) //巡检报告布尔值
const changXhaoBg = () => {
  isShowXunjainbaogao.value = false
}
</script>
<style scoped lang="less">
.iframe-tuobiao {
  pointer-events: none;
}
#TwinContent {
  pointer-events: none;
  position: absolute;
  z-index: 1000;
}
.Home-box {
  height: 100%;
  // overflow-x: hidden;
  // overflow-y: hidden;
  #iframe {
    z-index: -10;
    position: absolute;
    bottom: 0;
    border: 0;
  }
  .Home-UI-box {
    z-index: 100px;
    box-sizing: border-box;
    // background-color: red;
    .Home-UI-top {
      position: relative;
      .Home-UI-title {
        width: 100%;
        height: 76px;
        background: url("@/assets/title/toubu.png") no-repeat center;
        background-size: 100% 100%;
      }
      .Home-UI-fanhui {
        cursor: pointer;
        width: 29px;
        height: 20px;
        position: absolute;
        left: 20px;
        top: 20px;
        background-color: pink;
        background: url("@/assets/home/anniu_dianji.png") no-repeat center;
        background-size: 100% 100%;
      }
      .Home-UI-fanhui:hover {
        cursor: pointer;
        width: 29px;
        height: 20px;
        position: absolute;
        left: 20px;
        top: 20px;
        background-color: pink;
        background: url("@/assets/home/anniu_fanhui.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    .Home-UI-dibu {
      position: absolute;
      width: 100%;
      height: 35px;
      bottom: 0px;
      background: url("@/assets/title/dibu.png") no-repeat center;
      background-size: 100% 100%;
    }
    .Home-UI-SwitchTo {
      display: flex;
      align-items: center;
      position: absolute;
      top: 68px;
      width: 488px;
      height: 29px;
      background-color: pink;
      background: url("@/assets//home/xialakuang.png") no-repeat center;
      background-size: 100% 100%;
      margin-left: 20px;

      span {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
        background-image: -webkit-linear-gradient(
          top,
          #d5f4ff,
          #a8e9ff,
          #6edbff
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .sanjiao-sanjiao {
        pointer-events: all;
        margin-left: 10px;
        cursor: pointer;
        margin-top: 5px;
        width: 15px;
        height: 10px;
        background: url("@/assets/home/anniu_xiala (1).png") no-repeat center;
        background-size: 100% 100%;
      }
      .sanjiao-sanjiao1 {
        margin-left: 10px;
        margin-top: -5px;
        width: 15px;
        height: 10px;
        background: url("@/assets/home/anniu_shouhui.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    .Home-UI-SwitchTo-box {
      pointer-events: all;
      z-index: 1;
      position: absolute;
      top: 88px;
      left: 20px;
      width: 488px;
      height: 350px;
      background: url("@/assets/home/xialalan_xialakuang.png") no-repeat center;
      background-size: 100% 100%;

      .SwitchTo-box {
        box-sizing: border-box;
        overflow: scroll;
        margin-top: 15px;
        width: 488px;
        height: 325px;
        .Home-UI-SwitchTo-item {
          line-height: 38px;
          cursor: pointer;
          width: 460px;
          height: 38px;
          margin-top: 8px;
          margin-left: 50%;
          transform: translate(-50%);
          text-align: center;
          span {
            font-weight: 600;
            background-image: -webkit-linear-gradient(
              top,
              #d5f4ff,
              #a8e9ff,
              #6edbff
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        .Home-UI-SwitchTo-item:hover {
          width: 460px;
          height: 38px;
          margin-top: 8px;
          margin-left: 50%;
          transform: translate(-50%);
          background-color: pink;
          background: url("@/assets/home/xialakuang_xuanzhong.png") no-repeat
            center;
          background-size: 100% 100%;
        }
      }
    }
    div::-webkit-scrollbar {
      display: none;
      overflow: scroll;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE10+ */
      &::-webkit-scrollbar {
        display: none; /* ChromeSafari */
      }
    }

    .Home-UI-TwinOperation {
      pointer-events: all;
      position: absolute;
      top: 105px;
      width: 488px;
      height: 500px;
      margin-left: 20px;
    }
    .Home-UI-TwinSafety {
      pointer-events: all;
      position: absolute;
      top: 105px;
      width: 488px;
      height: 500px;
      margin-left: 20px;
    }
    .Home-UI-TwinHealth {
      pointer-events: all;
      position: absolute;
      top: 105px;
      width: 488px;
      height: 500px;
      margin-left: 20px;
    }

    .Home-UI-Broadcast {
      pointer-events: all;
      position: absolute;
      width: 508px;
      height: 38px;
      right: 20px;
      bottom: 44px;
      background: url("@/assets/gaojing/shanglalan_gaojingshebei.png") no-repeat
        center;
      background-size: 100% 100%;
      .Home-UI-Broadcast-title {
        margin-left: 2%;
        width: 96%;
        height: 100%;
        display: flex;
        align-items: center;
        // background-color: red;
        font-size: 12px;
        .Broadcast-tanhao {
          width: 14px;
          height: 14px;
          background: url("@/assets/gaojing/icon_gaojing.png") no-repeat center;
          background-size: 100% 100%;
        }
        .Broadcast-name {
          margin-left: 5px;
          color: #fff;
          // width: 30%;
        }
        .Broadcast-enirong {
          margin-left: 15px;
          color: #fff;
          // width: 30%;
        }
        .Broadcast-shijan {
          margin-left: 15px;
          color: #fff;
          // width: 30%;
        }
        .Broadcast-jiantou {
          cursor: pointer;
          margin-left: 7px;
          margin-top: -5px;
          width: 12px;
          height: 10px;
          background: url("@/assets/gaojing/anniu_gaojing_shangla.png")
            no-repeat center;
          background-size: 100% 100%;
        }
        .Broadcast-jiantou1 {
          cursor: pointer;
          margin-left: 7px;
          margin-top: 5px;
          width: 12px;
          height: 10px;
          background: url("@/assets/gaojing/anniu_gaojing_shouhui.png")
            no-repeat center;
          background-size: 100% 100%;
        }
      }
    }
    .Home-UI-Broadcast-box {
      pointer-events: all;
      position: absolute;
      bottom: 40px;
      width: 508px;
      height: 300px;
      overflow: scroll;
      // display: flex;
      // align-items: flex-end; //反向布局
      background: url("@/assets/gaojing/shanglalan_shanglakuang.png") no-repeat
        center;
      background-size: 100% 100%;
      .Broadcast-item {
        cursor: pointer;
        margin-top: 10px;
        font-size: 12px;
        margin-left: 2%;
        width: 96%;
        height: 23px;
        display: flex;
        align-items: center;
        .Broadcast-name {
          margin-left: 5px;
          color: #fff;
          // width: 30%;
        }
        .Broadcast-enirong {
          margin-left: 15px;
          color: #fff;
          // width: 30%;
        }
        .Broadcast-shijan {
          margin-left: 15px;
          color: #fff;
          // width: 30%;
        }
      }
      .Broadcast-item:hover {
        cursor: pointer;
        margin-top: 10px;
        font-size: 12px;
        margin-left: 2%;
        width: 96%;
        height: 23px;
        display: flex;
        align-items: center;
        background: url("@/assets/gaojing/shanglalan_xuanzhng.png") no-repeat
          center;
        background-size: 100% 100%;
        .Broadcast-name {
          margin-left: 5px;
          color: #fff;
          // width: 30%;
        }
        .Broadcast-enirong {
          margin-left: 15px;
          color: #fff;
          // width: 30%;
        }
        .Broadcast-shijan {
          margin-left: 15px;
          color: #fff;
          // width: 30%;
        }
      }
    }

    .Home-UI-buttonbox {
      pointer-events: all;
      position: absolute;
      width: 690px;
      height: 50px;
      // background-color: red;
      left: 50%;
      bottom: 40px;
      transform: translate(-50%);
      display: flex;
      justify-content: space-between;
      // 运行==================================
      .UI-buttonbox-yunxing {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshengyunxing_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-yunxingG {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshengyunxing_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-yunxing:hover {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshengyunxing_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      // 安全==================================
      .UI-buttonbox-anquan {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshenganquan_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-anquan:hover {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshenganquan_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-anquanG {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshenganquan_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      // 健康 ===================================================
      .UI-buttonbox-jiankang {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_luanshengjiankang_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-jiankang:hover {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/luanshengjiankang.png") no-repeat
          center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-jiankangG {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/luanshengjiankang.png") no-repeat;
        background-size: 100% 100%;
      }
      // 监控 ======================================
      .UI-buttonbox-jiankong {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_shebeijianshi_pt.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-jiankong:hover {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_shebeijianshi_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
      .UI-buttonbox-jiankongG {
        cursor: pointer;
        width: 170px;
        height: 50px;
        background: url("@/assets/bottombutton/anniu_shebeijianshi_dj.png")
          no-repeat center;
        background-size: 100% 100%;
      }
    }
    .Home-UI-Inspection {
      pointer-events: all;
      position: absolute;
      width: 647px;
      height: 345px;
      bottom: 159px;
      right: 26px;
      // background-color: red;
      background: url("@/assets/xunjian/tanchuang_zhengzaixunjian.png")
        no-repeat center;
      background-size: 100% 100%;
    }
    .Home-UI-InspectionReport {
      pointer-events: all;
      width: 712px;
      height: 366px;
      background: url("@/assets/xunjian/tanchuang_AIxunjianbaogao.png")
        no-repeat center;
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
    }
    .VueDragResize-box {
      pointer-events: all;
    }
    .Home-UI-Camera {
      // pointer-events: all;
      width: 100%;
      height: 100%;
      background: url("@/assets/home/changzhanzhushijiao.png") no-repeat center;
      background-size: 100% 100%;
    }
    .Home-UI-Camera1 {
      // pointer-events: all;
      width: 100%;
      height: 100%;
      background: url("@/assets/home/shipinjuzhenjvzhen.png") no-repeat center;
      background-size: 100% 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      .Camera1-item:nth-child(1) {
        margin-left: 4%;
        margin-top: 3.5%;
        width: 44.5%;
        height: 44%;
      }
      .Camera1-item:nth-child(2) {
        margin-left: 4%;
        margin-top: 3.5%;
        width: 44.5%;
        height: 44%;
      }
      .Camera1-item:nth-child(3) {
        margin-left: 4%;
        margin-top: 1%;
        width: 44.5%;
        height: 44%;
      }
      .Camera1-item:nth-child(4) {
        margin-left: 4%;
        margin-top: 1%;
        width: 44.5%;
        height: 44%;
      }
    }
  }
}
</style>
